@use '@scss/common' as common;
@use '../shared.scss' as shared;

.wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column-reverse;
  width: 100%;
}

.labelBar {
  display: flex;
  align-items: center;
}

.isHidden {
  .input {
    pointer-events: none;
  }
}

.input {
  @include shared.formInput;
  & {
    pointer-events: all;
  }

  &.error {
    background-color: var(--theme-failure-500);
  }
}

.tooltipButton {
  width: 100%;
  height: 100%;
}

.description {
  margin-bottom: 0;
}

:global([data-theme='light']) {
  .input {
    background: var(--theme-elevation-50);
  }
}

.largeLabel {
  @include common.h5;
}
